<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:f="http://java.sun.com/jsf/core" 
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets" 
      xmlns:p="http://primefaces.org/ui" 
      xmlns:composite="http://java.sun.com/jsf/composite">

    <composite:interface>
        <composite:attribute name="backingBean" />
        <composite:attribute name="regions" />
        <composite:attribute name="categories" />
        <composite:attribute name="types" />
    </composite:interface>

    <composite:implementation>
        <h:panelGroup id="add-item" styleClass="add-item" layout="block">
            <h:panelGroup id="add-item-block-1" styleClass="add-item-block-1 info-block" layout="block">
                <h2><h:outputText value="#{msgs['itemAddPage.item.1.title']}"/></h2>

                <label for="region"><h:outputText value="#{msgs['itemAddPage.item.1.region']}"/></label>
                <h:selectOneMenu id="region" value="#{cc.attrs.backingBean.region}"
                                 converter="selectItemsConverter" hideNoSelectionOption="true">
                    <f:selectItem noSelectionOption="true" />
                    <f:selectItems value="#{cc.attrs.regions}" var="region" itemValue="#{region}" itemLabel="#{region.name}" />
                </h:selectOneMenu>
                <h:message for="region" errorClass="error"/>

                <label for="code-postal"><h:outputText value="#{msgs['itemAddPage.item.1.codepostal']}"/></label>
                <h:inputText id="code-postal" value="#{cc.attrs.backingBean.postalCode}" />
                <h:message for="code-postal" errorClass="error"/>
            </h:panelGroup>
            <h:panelGroup id="add-item-block-2" styleClass="add-item-block-2 info-block" layout="block">
                <h2><h:outputText value="#{msgs['itemAddPage.item.2.title']}"/></h2>

                <label for="category"><h:outputText value="#{msgs['itemAddPage.item.2.category']}"/></label>
                <h:selectOneMenu id="category" value="#{cc.attrs.backingBean.category}" 
                                 converter="selectItemsConverter" hideNoSelectionOption="true">
                    <f:selectItem noSelectionOption="true" />
                    <f:selectItems value="#{cc.attrs.categories}" var="category" itemValue="#{category}" itemLabel="#{category.name}" />
                </h:selectOneMenu>
                <h:message for="category" errorClass="error"/>

                <label for="type"><h:outputText value="#{msgs['itemAddPage.item.2.type']}"/></label>
                <h:selectOneRadio id="type" value="#{cc.attrs.backingBean.type}" styleClass="item-type">
                    <f:selectItems value="#{cc.attrs.types}" var="type" itemValue="#{type}" itemLabel="#{msgs[type.messageKey]}" itemDescription="#{msgs[type.messageKey]}" />
                </h:selectOneRadio>
            </h:panelGroup>
            <h:panelGroup id="add-item-block-3" styleClass="add-item-block-3 info-block" layout="block">
                <h2><h:outputText value="#{msgs['itemAddPage.item.3.title']}"/></h2>

                <label for="name"><h:outputText value="#{msgs['itemAddPage.item.3.name']}"/></label>
                <h:inputText id="name" value="#{cc.attrs.backingBean.name}" />
                <h:message for="name" errorClass="error"/>

                <label for="email"><h:outputText value="#{msgs['itemAddPage.item.3.email']}"/></label>
                <h:inputText id="email" value="#{cc.attrs.backingBean.email}" />  
                <h:message for="email" errorClass="error"/>

                <label for="phone"><h:outputText value="#{msgs['itemAddPage.item.3.phone']}"/></label>
                <h:inputText id="phone" value="#{cc.attrs.backingBean.phone}" />  
                <h:message for="phone" errorClass="error"/>
            </h:panelGroup>
            <h:panelGroup id="add-item-block-4" styleClass="add-item-block-4 info-block" layout="block">
                <h2><h:outputText value="#{msgs['itemAddPage.item.4.title']}"/></h2>

                <label for="title"><h:outputText value="#{msgs['itemAddPage.item.4.item.title']}"/></label>
                <h:inputText id="title" value="#{cc.attrs.backingBean.title}" />  
                <h:message for="title" errorClass="error"/>
                
                <label for="description"><h:outputText value="#{msgs['itemAddPage.item.4.item.desc']}"/></label>
                <h:inputTextarea id="description" value="#{cc.attrs.backingBean.description}" rows="4" cols="50" />  
                <h:message for="description" errorClass="error"/>
                
                <label for="price"><h:outputText value="#{msgs['itemAddPage.item.4.item.price']}"/></label>
                <h:inputText id="price" value="#{cc.attrs.backingBean.price}" converter="javax.faces.Double"/>
                <h:message for="price" errorClass="error"/>
            </h:panelGroup>
            <h:panelGroup id="add-item-block-5" styleClass="add-item-block-5 info-block" layout="block">
                <h2><h:outputText value="#{msgs['itemAddPage.item.5.title']}"/></h2>
                <h:graphicImage url="/img/no-photo.jpg" />
                <h:commandButton value="#{msgs['itemAddPage.item.5.add']}" styleClass="upload-photo" />    
            </h:panelGroup>
        </h:panelGroup>
    </composite:implementation>
</html>
